<template>
	<view class="wrap">
		<view class="body">
			<view class="flex">
				<image class="icon-login" src="@/static/logo.png" mode=""></image>
			</view>
			<view class="content">
				<view class="tabs">
					<view :class="{active: model.type === 1}" @click="switchMode(1)">短信登录</view>
					<view :class="{active: model.type === 2}" @click="switchMode(2)">密码登录</view>
				</view>
				<view style="min-height: 280rpx;">
					<view v-show="model.type === 1">
						<u--form labelPosition="left" :model="model" :rules="rules" ref="formCode" labelWidth="0">
							<u-form-item prop="tel" borderBottom>
								<u--input type="number" v-model="model.tel" border="none" placeholder="请输入手机号码"
									@change="change" maxlength="11">
								</u--input>
							</u-form-item>
							<u-form-item prop="mobileCode" borderBottom>
								<u--input type="number" v-model="model.mobileCode" border="none" placeholder="请输入验证码"
									@change="change" maxlength="6">
								</u--input>
								<view class="tips" slot="right" @tap="getCode" v-text="tips"></view>
								<!-- <u-button slot="right" @tap="getCode" :text="tips" size="mini" type="primary">
								</u-button> -->
							</u-form-item>
						</u--form>
					</view>
					<view v-show="model.type === 2">
						<u--form :model="model" :rules="rules" ref="formPassword" labelWidth="0" labelPosition="left">
							<u-form-item prop="account" borderBottom>
								<u--input v-model="model.account" border="none" placeholder="输入手机号或者邮箱"
									@change="change">
								</u--input>
							</u-form-item>
							<u-form-item prop="password" borderBottom>
								<u--input v-model="model.password" type="password" border="none" placeholder="请输入密码"
									@change="change">
								</u--input>
							</u-form-item>
						</u--form>
					</view>
				</view>
				<view class="submit">
					<view :class="disable ? 'disable' : ''" @click="submit">登录</view>
				</view>
				<view class="footer">
					<u-checkbox-group v-model="checkboxValue" activeColor="#00468C" @change="checkboxChange">
						<u-checkbox size="16" name="checked"></u-checkbox>
					</u-checkbox-group>
					<view class="text">
						我已阅读<text @click="goClause('服务条款')">《运易通服务条款》</text>与<text
							@click="goClause('隐私政策')">《运易通隐私政策》</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 弹出组建 -->
		<u-popup :show="showClause" :round="10" @close="showClause = false">
			<view class="clause">
				<view class="title">请阅读并同意以下条款</view>
				<view class="text">
					<text @click="goClause('服务条款')">《服务条款》</text>
					<text @click="goClause('隐私政策')">《隐私政策》</text>
				</view>
				<view class="next" @click="next">同意并继续</view>
			</view>
		</u-popup>
		<u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled = true" @end="disabled = false"></u-code>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	import {
		smsCode,
		smsLogin,
		getUserMenuList
	} from '@/config/api/app.js'
	import Cache from '@/utils/cache'
	export default {
		data() {
			return {
				disable: true,
				checkboxValue: [],
				showClause: false,
				tips: '',
				model: {
					tel: '',
					account: '',
					mobileCode: '',
					password: '',
					userType: 2, //用户类型固定为2
					type: 1
				},
				rules: {
					tel: [{
						type: 'string',
						required: true,
						message: '请输入手机号码',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value) || uni.$u.test.email(value);
						},
						message: "请输入正确的手机号码",
						trigger: ["change", "blur"],
					}],
					account: [{
						type: 'string',
						required: true,
						message: '请输入手机号码或邮箱',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							let reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
							return uni.$u.test.mobile(value) || reg.test(value);
						},
						message: "请输入正确的手机号码或邮箱",
						trigger: ["change", "blur"],
					}],
					mobileCode: {
						type: 'string',
						required: true,
						len: 6,
						message: '请填写6位验证码',
						trigger: ['blur', "change"]
					},
					password: {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur']
					}
				}
			}
		},
		onLoad() {},
		methods: {
			goClause(text) {
				uni.navigateTo({
					url: `./clause?text=${text}`
				})
			},
			switchMode(type) {
				console.log(type)
				if (this.model.type === type) {
					return
				} else {
					this.model.type === 1 ? this.$refs.formCode.clearValidate() : this.$refs.formPassword.clearValidate()
					this.model.tel = ''
					this.model.account = ''
					this.model.mobileCode = ''
					this.model.password = ''
					this.model.type = type
					this.disable = true
				}
			},
			checkboxChange(e) {
				console.log(this.checkboxValue)
			},
			codeChange(text) {
				this.tips = text;
			},
			change(e) {
				if (this.model.type === 1) {
					if (this.model.tel && this.model.mobileCode) {
						this.disable = false
					} else {
						this.disable = true
					}
				} else {
					if (this.model.account && this.model.password) {
						this.disable = false
					} else {
						this.disable = true
					}
				}
			},
			getCode() {
				if (!this.model.tel) {
					uni.$u.toast('请输入手机号');
					return
				}
				if (!uni.$u.test.mobile(this.model.tel)) {
					uni.$u.toast('输入手机号格式不正确');
					return
				}
				let data = {
					tel: this.model.tel,
					smsType: 1
				}
				if (this.$refs.uCode.canGetCode) {
					// 获取验证码
					smsCode(data, {
						custom: {
							title: '正在获取验证码……'
						}
					}).then((res) => {
						console.log(res)
						if (res.code != 0) {
							uni.$u.toast(res.msg);
						} else {
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}
					}).catch(err => {
						console.log(err)
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			login() {
				if (this.model.type === 1) {
					if (!this.model.tel) {
						uni.$u.toast('请输入手机号');
						return
					}
					if (!uni.$u.test.mobile(this.model.tel)) {
						uni.$u.toast('输入手机号格式不正确');
						return
					}
					if (!this.model.mobileCode) {
						uni.$u.toast('输入验证码');
						return
					}
				}
				if (this.model.type === 2) {
					if (!this.model.account) {
						uni.$u.toast('请输入账号');
						return
					}
					if (!uni.$u.test.mobile(this.model.account) && !uni.$u.test.email(this.model.account)) {
						uni.$u.toast('输入账号格式不正确');
						return
					}
					if (!this.model.password) {
						uni.$u.toast('输入密码');
						return
					}
					this.model.tel = this.model.account
				}
				smsLogin(this.model, {
					custom: {
						title: '登录中……'
					}
				}).then(res => {
					console.log(res,111111111111)
					if (res.code == 0) {
						let list = JSON.stringify(res.data.userEtpList)
						let token = res.data.token
						if (res.data.userEtpList.length > 1) {
							uni.navigateTo({
								url: `./select?list=${list}&token=${token}`
							})
						} else {
							let options = {
								token: res.data.token,
								userInfo: res.data.userEtpList
							}
							this.LOGIN(options)
							uni.$u.toast("登录成功")
							this.getMenu()
						}
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			submit() {
				if (this.disable) return
				if (this.model.type === 1) {
					this.$refs.formCode.validate().then(res => {
						console.log(res)
						if (!this.checkboxValue.length) {
							this.showClause = true
						} else {
							// 登录接口
							this.login()
						}
					}).catch(errors => {
						uni.$u.toast('输入格式不正确！')
					})
				} else {
					this.$refs.formPassword.validate().then(res => {
						if (!this.checkboxValue.length) {
							this.showClause = true
						} else {
							// 登录接口
							this.login()
						}
					}).catch(errors => {
						uni.$u.toast('输入格式不正确！')
					})
				}
			},
			next() {
				this.checkboxValue = ["checked"]
				this.showClause = false
				setTimeout(() => {
					// 登录接口
					this.login()
				}, 500)
			},
			//查询菜单权限
			getMenu() {
				getUserMenuList().then((res) => {
					console.log(res)
					if (res.code == 0) {
						Cache.set("MENU", res.data, 59 * 24 * 60 * 60);
						uni.reLaunch({
							url: '/pages/home/home'
						})
					} else {
						Cache.remove("TOKEN")
						Cache.remove("USERINFO")
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			...mapMutations(["LOGIN"])
		}
	}
</script>

<style lang="scss" scoped>
	.clause {
		padding: 32rpx 100rpx calc(32rpx + env(safe-area-inset-bottom));
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 500;
		text-align: center;

		.title {
			color: #333333;
		}

		.text {
			color: #00468C;
			margin: 96rpx 0;
		}

		.next {
			width: 100%;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			border-radius: 12rpx;
			text-align: center;
			background: linear-gradient(to right, #4d83b9, #003E81);
		}
	}

	.wrap {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: #fff;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 280rpx;
			z-index: 10;
		}

		.body {
			padding: 80rpx 48rpx;
			position: relative;
			z-index: 11;
			left: 50%;
			top: 40%;
			transform: translate(-50%, -50%);

			.flex {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.icon-login {
				width: 292rpx;
				height: 320rpx;
				margin: 0 auto;
			}

			.content {
				margin-top: 24rpx;

				.tips {
					font-size: 24rpx;
					font-weight: 400;
					color: #00468C;
				}

				.tabs {
					display: flex;
					align-items: baseline;
					font-size: 34rpx;
					font-weight: 500;
					color: #868D97;
					margin-bottom: 48rpx;

					view {
						margin-right: 48rpx;
					}

					.active {
						font-size: 50rpx;
						color: #333333;
					}
				}

				.submit {
					padding: 0 32rpx;
					margin-top: 60rpx;

					view {
						width: 100%;
						font-size: 30rpx;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 80rpx;
						border-radius: 12rpx;
						text-align: center;
						background: linear-gradient(to right, #4d83b9, #003E81);

						&.disable {
							color: #fff;
							background: #dcdcdc;
						}
					}
				}
			}
		}

		.footer {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			box-sizing: border-box;

			.text {
				font-size: 22rpx;
				font-weight: 400;
				color: #000000;

				text {
					color: #00468C;
				}
			}
		}
	}
</style>
